<template>
    <div class="app-container">
        <div class="flex-head">
            <FormSearch
                ref="formSearchRef"
                :FormParams="queryParams"
                :FormRules="searchFormRules"
                :FormShow="showSearch"
                @submit="getList"
                @refresh="getList" />
            <el-row class="mb20">
                <el-col :span="20">
                    <el-button type="primary" @click="addCity" icon="Upload">新增</el-button>
                </el-col>
                <el-col :span="4">
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
                </el-col>
            </el-row>
        </div>
        <TableBate
            id="tableBateId"
            ref="tableRef"
            :loading="loading"
            :TableHead="tableHead"
            :TableData="tableData"
            :TableAttrs="tableAttrs"
            @handleSelectionChange="handleSelectionChange"
            @handleActionBarEvent="handleActionBarEvent">
            <template #name="{ row }">
                <span>{{ row.touristList.map((item) => item.name).join('、') }}</span>
            </template>
            <template #status="{ row }">
                <template v-for="item in statusOptions">
                    <el-tag v-if="item.value == row.status" :type="item.elTagClass">{{ item.label }}</el-tag>
                </template>
            </template>
            <template #pay="{ row }">
                <span class="clickable" @click="handleCopy(row.payParams)">{{  row.payParams }}</span>
            </template>
            <template #image="{ row }">
                <div>
                    <img v-if="row.payUrl" width="150" height="150" :src="row.payUrl" />
                    <div v-else></div>
                </div>
            </template>
        </TableBate>
        <el-dialog v-model="dialog" :title="title" center>
            <JsFrom
                ref="formRef" 
                :Rule="formRules"
                :PropsConfig="formProps"
                :FormParams="formParams"
            >
                <template #footer>
                    <div class="btn-wrap">
                        <el-button  @click="handleCancel">取 消</el-button>
                        <el-button type="primary" @click="handleSubmitForm">提 交</el-button>
                    </div>
                </template>
            </JsFrom>
        </el-dialog>
        <!-- <pagination
            id="pagination"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNumber"
            v-model:limit="queryParams.pageSize"
            @pagination="getList" /> -->
    </div>
</template>

<script setup>
import FormSearch from '@/components/FormSearch/index.jsx'
import JsFrom from '@/components/Form/index.tsx'
import TableBate from '@/components/Table_Bate/index.jsx'
import { searchFormRules, tableHead, formRules } from './config'
import { orderPages, addAddRess } from '@/api/ppmt/cityList.js'
import { onMounted } from 'vue';

onMounted(() => {
    getList()
})

const tableData = ref([])
const dialog = ref(false)
const title = ref('')

const data = reactive({
    queryParams: {
        pageNumber: 1,
        pageSize: 10,
    },
    tableAttrs: {
        size: 'large',
        align: 'center',
    },
    formProps: {
        'label-width': '80px',
    },
    formParams: {}
})

const { queryParams, tableAttrs, formProps, formParams } = toRefs(data)

const getList = () => {
    orderPages().then(res => {
        console.log(res.result, 'res');
        tableData.value = res.result
    })
}

const handleResetForm = () => {
    const rules = formRules.filter(rule => ['input', 'select', 'textarea'].includes(rule.type))
        
    for(let item of rules) {
        formParams.value[item.props.prop] = null
    }
}

// 提交
const handleSubmitForm = () => {

    addAddRess(formParams.value).then(res => {

    })
}

// 取消
const handleCancel = () => {
    handleResetForm()
    dialog.value = false
}

const addCity = () => {
    title.value = '新增城市'
    dialog.value = true
}
</script>

<style lang="scss" scoped>
.btn-wrap {
    text-align: right;
}
</style>

